<template>
  <el-form label-width="100px" inline>
    <el-form-item v-for="data in categoryData" :key="data.id" :label="data.unitName">
      <el-select v-if="shouldUpdateGetters" v-model="categoryUnitModelGetters[data.id].unitCategoryValueId">
        <el-option v-for="select in data['metaUnitCategoryValues']"
                   :key="select.id"
                   :label="select.unitName"
                   :value="select.id">
        </el-option>
      </el-select>
      <el-input
        v-else
        v-model="categoryUnitModelGetters[data.id].unitCategoryValueName"
        :disabled="true">
      </el-input>
    </el-form-item>
  </el-form>
</template>

<script>
    import {getCategory} from '@/api/module/category'
    import {get} from 'lodash'
    import {mapGetters, mapMutations} from 'vuex'

    export default {
        name: 'value',
        data() {
            return {
                categoryData: []
            }
        },
        methods: {
            ...mapMutations([
                'changeCategoryUnitModel'
            ]),
            initData() {
                getCategory().then(res => {
                    this.categoryData = get(res, 'data.data', [])
                    let categoryModel = {}
                    let categoryUnitModel = {}
                    this.categoryData.forEach(data => {
                        categoryModel[data.id] = ''
                        categoryUnitModel[data.id] = {
                            unitId: '',
                            unitCategoryValueId: '',
                            unitCategoryValueName: ''
                        }
                    })
                    this.changeCategoryUnitModel(categoryUnitModel)
                })
            }
        },
        mounted() {
            this.initData()
        },
        computed: {
            ...mapGetters([
                'shouldUpdateGetters',
                'categoryUnitModelGetters'
            ])
        }
    }
</script>
